// pages/pulldown-ceiling/index.ts
Page({

    /**
     * 页面的初始数据
     */
    data: {
        // 导航数据
        navData: [
            {
                id: 1,
                title: '导航一',
                content: '1111'
            },
            {
                id: 2,
                title: '导航二',
                content: '2222'
            },
            {
                id: 3,
                title: '导航三',
                content: '3333'
            },
            {
                id: 4,
                title: '导航四',
                content: '4444'
            },
            {
                id: 5,
                title: '导航五',
                content: '5555'
            },
            {
                id: 6,
                title: '导航六',
                content: '6666'
            },
            {
                id: 7,
                title: '导航七',
                content: '7777'
            },
            {
                id: 8,
                title: '导航八',
                content: '8888'
            },
        ],
        selectedId: 1, // 当前选中的导航id
        scrollLeft: 0, // 导航栏滚动偏移量
    },
    initNavInfo: [], // 存放每个导航内容的高度
    onLoad () {
      const query = wx.createSelectorQuery();
      // 假定每个导航内容的高度都未知
      query.selectAll('.nav-content').boundingClientRect()
      query.selectAll('.menu-item2').boundingClientRect()
      query.exec(res => {
        // 计算导航的临界值
        this.initNavInfo = res[0].map((item: any, index: number) => {
          let totalHeight = 0;
          for (let i = 0; i < index; i++) {
            totalHeight += item.height;
          }
          return {
            totalHeight,
            id: item.dataset.id,
            scrollLeft: res[1][index].left - res[1][0].left
          }
        })

      })
    },
    // 选择id
    chooseId (e: any) {
      const { id } = e.currentTarget.dataset;
      this.setData({
          selectedId: id
      })
    },
    // 列表滚动事件
    scrollFn (e: any) {
      const { scrollTop } = e.detail;
      let selectedId = 0;
      let scrollLeft = 0;
      
      this.initNavInfo.forEach((item: any) => {
        if (scrollTop >= item.totalHeight) {
          selectedId = item.id
          scrollLeft = item.scrollLeft
        }
      })
      console.log('scrollLeft', scrollLeft)
      this.setData({
        selectedId,
        scrollLeft
      })
    }
   
})